<template>
    <el-menu  background-color="#04426B" text-color="white" active-text-color="white" unique-opened="true"   class="el-menu-vertical-demo">
        <el-sub-menu index="1">
            <template #title>
                <i class="el-icon-delete"></i>
                <span>导航一</span>
            </template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
            <el-menu-item index="1-3">选项3</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
            <template #title>
                <i class="el-icon-menu"></i>
                <span>导航二</span>
            </template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
        </el-sub-menu>
        <!-- 更多子菜单 -->
    </el-menu>
</template>

<script  setup>
    import 'element-plus/dist/index.css';
</script>

<style>
    /* 修改选中项的背景色 */
    .el-menu-item.is-active {
        background-color: #2F61C7 !important; /* 你想要的颜色 */
        color: white;
        height: 45px;
    }
    .el-sub-menu .el-menu-item {
        height: 45px;
        line-height: 45px;
    }
    .el-sub-menu__title{
        height: 45px;
        line-height: 45px;
    }
</style>